<script setup lang="ts">
import { ElMessage } from 'element-plus'; // 引入 Element Plus 的消息提示组件
import { reactive, ref, onMounted } from "vue";
import useAdminStore from '@/store/modules/admin'; // 命名导入
import { useRouter } from 'vue-router'; // 引入 Vue Router

const adminStore = useAdminStore();
const $router = useRouter(); // 获取路由实例

let dialogFormVisible = ref(false);

let updateAdminInfoForm = reactive({
  adminUsername: adminStore.userInfo.adminUsername,
  adminEmail: adminStore.userInfo.adminEmail,
  adminPasswordPre: '',
  adminPassword: ''
});

// 获取个人信息
const fetchUserInfo = () => {
  updateAdminInfoForm.adminUsername = adminStore.userInfo.adminUsername;
  updateAdminInfoForm.adminEmail = adminStore.userInfo.adminEmail;
};

// 使用 onMounted 钩子在组件挂载后获取个人信息
onMounted(() => {
  fetchUserInfo();
});

const updateInfo = () => {
  // 修改信息实现
  dialogFormVisible.value = true;
  console.log(dialogFormVisible.value);
}

const commitInfo = async () => {
  dialogFormVisible.value = false;
  console.log("进入提交函数了吗");

  try {
    // 使用 await 等待 updateInfo 方法完成
    const result = await adminStore.updateInfo(updateAdminInfoForm);

    if (result === "ok") {
      // 显示成功消息
      ElMessage({
        message: '信息更新成功！请重新登录',
        type: 'success'
      });

      // 跳转到首页并刷新
      $router.push('/login').then(() => {
        window.location.reload(); // 刷新页面
      });
    } else {
      // 显示失败消息
      ElMessage.error('信息更新失败，请检查输入的信息');
    }
  } catch (error) {
    // 显示错误消息
    ElMessage.error('信息更新失败，请检查输入的信息');
    console.error("Failed to update user info", error);
  }
};
</script>

<template>
  <div>
    <el-descriptions class="margin-top" title="个人信息" :column="1" size="large" border>
      <template #extra>
        <el-button type="primary" @click="updateInfo">修改信息</el-button>
      </template>
      <!-- 用户名 -->
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user />
            </el-icon>
            用户名
          </div>
        </template>
        {{ adminStore.userInfo.adminUsername }}
      </el-descriptions-item>
      <!-- 邮箱 -->
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <message />
            </el-icon>
            邮箱
          </div>
        </template>
        {{ adminStore.userInfo.adminEmail }}
      </el-descriptions-item>
    </el-descriptions>

    <el-dialog v-model="dialogFormVisible" title="修改管理员信息">
      <el-form :model="updateAdminInfoForm">
        <el-form-item label="用户名" label-width="100">
          <el-input v-model="updateAdminInfoForm.adminUsername" autocomplete="off" readonly />
        </el-form-item>
        <el-form-item label="新邮箱" label-width="100">
          <el-input v-model="updateAdminInfoForm.adminEmail" type="email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="原始密码" label-width="100">
          <el-input v-model="updateAdminInfoForm.adminPasswordPre" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码" label-width="100">
          <el-input v-model="updateAdminInfoForm.adminPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">返回</el-button>
          <el-button type="primary" @click="commitInfo">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.el-descriptions {
  margin-top: 20px;
}
</style>